<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Teleport 特性演示</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        h1 {
            text-align: center;
            color: #667eea;
            margin-bottom: 30px;
        }

        .demo-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e1e8ed;
            border-radius: 8px;
            background: #f8f9fa;
        }

        .demo-section h2 {
            color: #333;
            margin-bottom: 15px;
        }

        .demo-section p {
            color: #666;
            margin-bottom: 15px;
            line-height: 1.6;
        }

        .btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            transition: background 0.3s;
        }

        .btn:hover {
            background: #5a67d8;
        }

        .btn-danger {
            background: #e53e3e;
        }

        .btn-danger:hover {
            background: #c53030;
        }

        .code-block {
            background: #f1f5f9;
            padding: 15px;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            margin: 10px 0;
            border-left: 4px solid #667eea;
            white-space: pre-line;
        }

        /* 模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal {
            background: white;
            border-radius: 8px;
            padding: 20px;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        /* 共享目标容器 */
        .shared-container {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 300px;
            background: #2d3748;
            color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            z-index: 999;
        }

        .shared-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 10px;
            margin: 8px 0;
            border-radius: 5px;
            font-size: 14px;
        }

        /* 延迟目标容器 */
        .deferred-target {
            margin-top: 20px;
            padding: 15px;
            background: #e6fffa;
            border: 2px solid #38b2ac;
            border-radius: 8px;
            min-height: 60px;
        }

        .deferred-content {
            background: #bee3f8;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }

        .status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-left: 10px;
        }

        .status.enabled {
            background: #c6f6d5;
            color: #22543d;
        }

        .status.disabled {
            background: #fed7d7;
            color: #742a2a;
        }

        .disabled-content {
            margin-top: 15px;
            padding: 15px;
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <h1>Vue 3 Teleport 特性演示</h1>

            <!-- 1. 基础 Teleport -->
            <div class="demo-section">
                <h2>1. 基础 Teleport</h2>
                <p>将模态框传送到 body 元素，脱离当前组件的 DOM 层级</p>
                <div class="code-block">&lt;Teleport to="body"&gt;
                    &lt;div v-if="showModal" class="modal-overlay"&gt;
                    &lt;div class="modal"&gt;模态框内容&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;/Teleport&gt;</div>
                <button class="btn" @click="showBasicModal = true">打开模态框</button>
            </div>

            <!-- 2. 禁用 Teleport -->
            <div class="demo-section">
                <h2>2. 禁用 Teleport</h2>
                <p>使用 <code>:disabled</code> 属性控制是否启用传送功能</p>
                <div class="code-block">&lt;Teleport to="body" :disabled="isDisabled"&gt;
                    &lt;div v-if="showModal"&gt;内容&lt;/div&gt;
                    &lt;/Teleport&gt;</div>
                <button class="btn" @click="showDisabledModal = true">打开模态框</button>
                <button class="btn" @click="isDisabled = !isDisabled">
                    {{ isDisabled ? '启用' : '禁用' }} Teleport
                </button>
                <span class="status" :class="isDisabled ? 'disabled' : 'enabled'">
                    {{ isDisabled ? '已禁用' : '已启用' }}
                </span>

                <!-- 禁用时显示在原位置 -->
                <div v-if="showDisabledModal && isDisabled" class="disabled-content">
                    <h4>禁用状态下的内容</h4>
                    <p>当 Teleport 被禁用时，内容会保留在原始位置而不是传送到目标位置</p>
                    <button class="btn btn-danger" @click="showDisabledModal = false">关闭</button>
                </div>
            </div>

            <!-- 3. 多个 Teleport 共享目标 -->
            <div class="demo-section">
                <h2>3. 多个 Teleport 共享目标</h2>
                <p>多个 Teleport 组件可以将内容挂载到同一个目标元素，内容会按顺序追加</p>
                <div class="code-block">&lt;!-- 第一个 Teleport --&gt;
                    &lt;Teleport to="#modals"&gt;
                    &lt;div&gt;A&lt;/div&gt;
                    &lt;/Teleport&gt;

                    &lt;!-- 第二个 Teleport --&gt;
                    &lt;Teleport to="#modals"&gt;
                    &lt;div&gt;B&lt;/div&gt;
                    &lt;/Teleport&gt;</div>
                <button class="btn" @click="showItemA = !showItemA">
                    {{ showItemA ? '隐藏' : '显示' }} 项目 A
                </button>
                <button class="btn" @click="showItemB = !showItemB">
                    {{ showItemB ? '隐藏' : '显示' }} 项目 B
                </button>
                <button class="btn" @click="showItemC = !showItemC">
                    {{ showItemC ? '隐藏' : '显示' }} 项目 C
                </button>
                <p style="font-size: 14px; color: #666; margin-top: 10px;">
                    查看右上角的共享容器，内容会按照挂载顺序依次追加
                </p>
            </div>



        </div>

        <!-- 基础模态框 Teleport -->
        <Teleport to="body">
            <div v-if="showBasicModal" class="modal-overlay" @click="showBasicModal = false">
                <div class="modal" @click.stop>
                    <h3 style="margin-bottom: 15px;">基础 Teleport 模态框</h3>
                    <p>这个模态框被传送到 body 元素，脱离了当前组件的 DOM 层级</p>
                    <button class="btn btn-danger" @click="showBasicModal = false">关闭</button>
                </div>
            </div>
        </Teleport>

        <!-- 可禁用的模态框 Teleport -->
        <Teleport to="body" :disabled="isDisabled">
            <div v-if="showDisabledModal && !isDisabled" class="modal-overlay" @click="showDisabledModal = false">
                <div class="modal" @click.stop>
                    <h3 style="margin-bottom: 15px;">可禁用 Teleport 模态框</h3>
                    <p>当前 Teleport 状态：{{ isDisabled ? '已禁用' : '已启用' }}</p>
                    <button class="btn btn-danger" @click="showDisabledModal = false">关闭</button>
                </div>
            </div>
        </Teleport>

        <!-- 多个 Teleport 共享同一个目标 -->
        <Teleport to="#shared-target">
            <div v-if="showItemA" class="shared-item">
                <strong>项目 A</strong> - 第一个 Teleport 组件的内容
            </div>
        </Teleport>

        <Teleport to="#shared-target">
            <div v-if="showItemB" class="shared-item">
                <strong>项目 B</strong> - 第二个 Teleport 组件的内容
            </div>
        </Teleport>

        <Teleport to="#shared-target">
            <div v-if="showItemC" class="shared-item">
                <strong>项目 C</strong> - 第三个 Teleport 组件的内容
            </div>
        </Teleport>


    </div>

    <!-- 共享目标容器 (在 Vue 应用外部) -->
    <div id="shared-target" class="shared-container">
        <h3 style="margin-bottom: 15px; text-align: center;">共享目标容器</h3>
        <p style="font-size: 13px; opacity: 0.8; margin-bottom: 10px;">
            多个 Teleport 的内容会按挂载顺序依次追加到这里
        </p>
    </div>

    <script>
        const { createApp, ref } = Vue

        createApp({
            setup() {
                // 基础模态框
                const showBasicModal = ref(false)

                // 可禁用的模态框
                const showDisabledModal = ref(false)
                const isDisabled = ref(false)

                // 共享目标项目
                const showItemA = ref(false)
                const showItemB = ref(false)
                const showItemC = ref(false)

                return {
                    showBasicModal,
                    showDisabledModal,
                    isDisabled,
                    showItemA,
                    showItemB,
                    showItemC,

                }
            }
        }).mount('#app')
    </script>
</body>

</html>